<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}
	#news{
		width: 500px;
		height: 50px;
		border: 5px solid blue;
		margin: 150px auto;
		position: relative;
		overflow: hidden;
	}
	#news ul{
		position: absolute;
		top: -50px;
		left: 0;
	}
	#news ul li{
		width: 500px;
		height: 50px;
		font-size: 20px;
		line-height: 50px;
		text-align: center;
		color: white;
		font-family: 微软雅黑;
		list-style: none;
	}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
	$(function(){
		// var c = 0;

		setInterval(function(){
			// 让第一个li高度变成0,然后将第一个li插入到ul的最后
			$('#news ul li').first().animate({'height':0}, 400,function(){//写到回调函数里，就没有bug了，分开写走程序几乎是同时
				$('#news ul').append($('#news ul li').first());
				$('#news ul li').last().height(50);
			});


		},1000)

	})
</script>
</head>

<body>

	<div id="news">
		<ul>
			<li style="background:purple;">谷歌收购NEST，进军智能家居？错！</li>
			<li style="background:orange;">谷歌收购Nest冷解读：智能家居春天还太远</li>
			<li style="background:green;">90后小米员工离职创立安全套品牌“大象”</li>
			<li style="background:blue;">特斯拉将在中国建免费充电站</li>
			<li style="background:grey;">苹果谷歌从不参加CES，但它们却无处不在</li>
			
		</ul>
	</div>

</body>
</html>
